/**
 * Created by sfr on 2017/10/10.
 */
import React from "react";
import {connect} from "dva";
import { routerRedux } from 'dva/router';
import moment from 'moment';
import {Flex, List, WhiteSpace, Icon} from "antd-mobile";
import styles from './partyCircle.less'
const empty = require('is-empty');

import activity1 from '../../../assets/news/activity1.jpg';
import activity2 from '../../../assets/news/activity2.jpg';
import activity3 from '../../../assets/news/activity3.jpg';
import activity4 from '../../../assets/news/activity4.jpg';
import activity5 from '../../../assets/news/activity5.jpg';
import activity6 from '../../../assets/news/activity6.jpg';
import new2 from '../../../assets/news/people.jpg';


class PartyCircle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isEllipsis1: true,
      isEllipsis2: true
    };
  }
  //==生命周期--页面渲染
  render() {
    return (
      <div className='partyCircle' style={{backgroundColor: '#fff',padding: '0 0 0.3rem 0'}}>
        {/*顶部图片*/}
        <div className={styles.headImgBox}> 
          <img src={activity6} alt="加载中..." className={styles.headImg}/>
          {/*个人头像*/}
          <div className={styles.userImgBox}> 
            <img src={new2} alt="加载中..." className={styles.userImg}/>
          </div>
        </div>
        <WhiteSpace style={{height: '0.7rem'}}/>   
        {/*第一条 党建圈*/}
        <div className={styles.circlecolumn}>
          <Flex justify='start' align='top'>
            <div className={styles.leftIconBox}>
              <img src={new2} alt="加载中..." className={styles.leftIcon}/>
            </div>
            <div style={{width: '100%'}}>
              <div className={styles.leftTitle}>李建国</div>
              <div className={styles.leftContent}>
                  <span className={this.state.isEllipsis1? styles.textEllipsis: null}>
                    2017年10月14日下午，人民大会堂，雄壮的国际歌又一次奏响。党的十八届七中全会落下帷幕。5年励精图治，以习近平同志为核心的党中央，带领中国站上新起点，为人类发展作出新贡献。
                  </span>
                  <div style={{color: '#36A5FF',fontSize: '0.28rem'}} onClick={this.handleEllipsis1}>{this.state.isEllipsis1? '[展开]' : '[收起]'}</div>
              </div>
              <Flex justify='between' align='top' wrap='wrap' className={styles.circleImgBox} onClick={this.handlePhoto}>
                <div className={styles.circleImgDiv}>
                  <img src={activity1} alt="加载中..." className={styles.circleImg}/>
                </div>
                <div className={styles.circleImgDiv}>
                  <img src={activity2} alt="加载中..." className={styles.circleImg}/>
                </div>
                <div className={styles.circleImgDiv}>
                  <img src={activity3} alt="加载中..." className={styles.circleImg}/>
                </div>
                <div className={styles.circleImgDiv}>
                  <img src={activity4} alt="加载中..." className={styles.circleImg}/>
                </div>
                <div className={styles.circleImgDiv}>
                  <img src={activity5} alt="加载中..." className={styles.circleImg}/>
                </div>
                <div className={styles.circleImgDiv}>
                  <img src={activity6} alt="加载中..." className={styles.circleImg}/>
                </div>
              </Flex>
              <Flex justify='between' align='center' wrap='wrap' className={styles.footerContent}>
                <div>09-26 10:30 </div>
                <div>
                  <Icon type={require('../../../svgs/news/fabulou.svg')} size='md' color='#6D7DA2'/>
                </div>
              </Flex>
              <div className={styles.handleFabulouTriangle}></div>
              <Flex justify='start' align='top'  className={styles.handleFabulouBox}>
                <div style={{marginRight:'1%'}}>
                  <Icon type={require('../../../svgs/news/fabulou.svg')} size='md' color='#6D7DA2'/>
                </div>
                <div>
                  <span className={styles.fabulouName}>张某某、</span>
                  <span className={styles.fabulouName}>张某某、</span>
                  <span className={styles.fabulouName}>张某某、</span>
                  <span className={styles.fabulouName}>张某某、</span>
                  <span className={styles.fabulouName}>张某某、</span>
                  <span className={styles.fabulouName}>张某某、</span>
                  <span className={styles.fabulouName}>张某某、</span>
                  <span className={styles.fabulouName}>张某某、</span>
                </div>
              </Flex>
            </div>
          </Flex>
        </div> 
        {/*第一条 党建圈*/}
        <div className={styles.circlecolumn}>
          <Flex justify='start' align='top'>
            <div className={styles.leftIconBox}>
              <img src={new2} alt="加载中..." className={styles.leftIcon}/>
            </div>
            <div style={{width: '100%'}}>
              <div className={styles.leftTitle}>李建国</div>
              <div className={styles.leftContent}>
                  <span className={this.state.isEllipsis2? styles.textEllipsis: null}>
                    2017年10月14日下午，人民大会堂，雄壮的国际歌又一次奏响。党的十八届七中全会落下帷幕。5年励精图治，以习近平同志为核心的党中央，带领中国站上新起点，为人类发展作出新贡献。
                  </span>
                  <div style={{color: '#36A5FF',fontSize: '0.28rem'}} onClick={this.handleEllipsis2}>{this.state.isEllipsis2? '[展开]' : '[收起]'}</div>
              </div>
              <Flex justify='between' align='top' wrap='wrap' className={styles.circleImgBox} onClick={this.handlePhoto}>
                <div className={styles.circleImgDiv}>
                  <img src={activity1} alt="加载中..." className={styles.circleImg}/>
                </div>
                <div className={styles.circleImgDiv}>
                  <img src={activity2} alt="加载中..." className={styles.circleImg}/>
                </div>
                <div className={styles.circleImgDiv}>
                  <img src={activity3} alt="加载中..." className={styles.circleImg}/>
                </div>
                <div className={styles.circleImgDiv}>
                  <img src={activity4} alt="加载中..." className={styles.circleImg}/>
                </div>
                <div className={styles.circleImgDiv}>
                  <img src={activity5} alt="加载中..." className={styles.circleImg}/>
                </div>
                <div className={styles.circleImgDiv}>
                  <img src={activity6} alt="加载中..." className={styles.circleImg}/>
                </div>
              </Flex>
              <Flex justify='between' align='center' wrap='wrap' className={styles.footerContent}>
                <div>09-26 10:30 </div>
                <div>
                  <Icon type={require('../../../svgs/news/fabulou.svg')} size='md' color='#6D7DA2'/>
                </div>
              </Flex>
              <div className={styles.handleFabulouTriangle}></div>
              <Flex justify='start' align='top'  className={styles.handleFabulouBox}>
                <div style={{marginRight:'0.1rem'}}>
                  <Icon type={require('../../../svgs/news/fabulou.svg')} size='md' color='#6D7DA2'/>
                </div>
                <div>
                  <span className={styles.fabulouName}>张某某、</span>
                  <span className={styles.fabulouName}>张某某、</span>
                  <span className={styles.fabulouName}>张某某、</span>
                  <span className={styles.fabulouName}>张某某、</span>
                  <span className={styles.fabulouName}>张某某、</span>
                  <span className={styles.fabulouName}>张某某、</span>
                  <span className={styles.fabulouName}>张某某、</span>
                  <span className={styles.fabulouName}>张某某、</span>
                  <span className={styles.fabulouName}>张某某、</span>
                  <span className={styles.fabulouName}>张某某、</span>
                </div>
              </Flex>
            </div>
          </Flex>
        </div>    
        {/*底部添加按钮*/}
        <div className={styles.add} onClick={this.handleAdd}>
          <Icon type={require('../../../svgs/news/pen.svg')}  className={styles.addIcon}/>
        </div>
      </div>
    );
	}
  //==组件所有函数
  //点击添加
  handleAdd = () => {
    this.props.dispatch(
      routerRedux.push({
        pathname: `/news/partyCircle/newsAdd`,
        query: {}
      })
    );
  }
  //点击图片
  handlePhoto = () => {
    this.props.dispatch(
      routerRedux.push({
        pathname: `/news/partyCircle/photoDetail`,
        query: {}
      })
    );
  }
  //点击朋友圈内容展开
  handleEllipsis1 =() => {
    this.setState({
      isEllipsis1: !this.state.isEllipsis1
    })
  }
  handleEllipsis2 =() => {
    this.setState({
      isEllipsis2: !this.state.isEllipsis2
    })
  }
}

function mapStateToProps({ infor }){
  return {
    infor
	};
}
export default connect(mapStateToProps)(PartyCircle);